<template>
  <div>
    <h1>Health Data</h1>
    <form @submit.prevent="recordHealthData">
      <div>
        <label for="steps">Steps:</label>
        <input type="number" v-model="steps" required />
      </div>
      <div>
        <label for="heartRate">Heart Rate:</label>
        <input type="number" v-model="heartRate" required />
      </div>
      <div>
        <label for="sleepHours">Sleep Hours:</label>
        <input type="number" v-model="sleepHours" required />
      </div>
      <button type="submit">Record</button>
    </form>
  </div>
</template>

<script>
import api from '@/services/api';

export default {
  name: 'HealthData',
  data() {
    return {
      steps: '',
      heartRate: '',
      sleepHours: '',
    };
  },
  methods: {
    async recordHealthData() {
      try {
        const healthData = {
          userId: this.$store.getters.user.id,
          date: new Date().toISOString().split('T')[0],
          steps: this.steps,
          heartRate: this.heartRate,
          sleepHours: this.sleepHours,
        };
        await api.recordHealthData(healthData);
        alert('Health data recorded successfully');
      } catch (error) {
        console.error('Error recording health data:', error);
      }
    },
  },
};
</script>
